<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue -->
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- 视图-->
		<div id="app">
			{{name}}<br />
			<input v-model="name" type="text"/>
			<h1 v-text="name"></h1>
			<!-- {{content}} -->
			<div v-text="content"></div>
			<div v-html="content"></div>
			
			<!-- 绑定属性 -->
			<img width="200" src="img/t03.jpg"/><br>
			<img width="200" v-bind:src='url'/> 
			<img :width="width" :src='url'/><!-- 简写 -->
			<img :height="height" :src='url'/>
			<br />
			<!-- 绑定事件 -->
			{{a}}
			<button v-on:click="a=a+1">+1</button><br>
			<button @click="a=a-1">-1</button><!-- 简写 -->
			
			<hr>
			<img :width="width2" :height="height2"  src="img/t03.jpg"/><br>
			<button @click="width2=width2+50">宽度加50</button><button  @click="width2=width2-50">宽度减50</button>
			<button  @click="height2=height2+50">高度加50</button><button  @click="height2=height2-50">高度减50</button>
		</div>
		<script>
			//vue实例
			const app=Vue.createApp({
				//数据
				data(){
					return{
						name:'张三',
						content:'<h1>hello vue</h1>',
						url:'img/t03.jpg',
						width:150,
						height:200,
						a:1,
						width2:200,
						height2:200
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>